@import 'variables'
@import 'nib'
@import 'mixins'

indent = 16px
indent-hover = 22px

#drawer
  position: absolute
  top: 0
  right: 0
  left: nav-width
  width: drawer-width
  bottom: 0
  color: drawer-color-fg
  background-color: drawer-color-bg
  text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px
  overflow-y: auto
  height: 100%
  .btn-popup
    background-color: transparent
    color: #9195a0
    border: 1px solid #595d66
    &:hover, &:active, &:focus
      color: #fff
      border-color: #fff
      outline: 0
  .btn-destructive
    &:hover
      border-color: #D43F3A
      color: #D43F3A
  .droppable
    user-select: none
    ul
      min-height: 8px
  .pane
    position: absolute
    right: 0
    left: 0
    height: 100%
  .inner
    padding: 8px 24px
    min-height: 100%
    padding-bottom: 42px
    h4
      margin: -9px -24px 0
    .version-select
      width: 80%
      display: inline-block
      font-size: 10px
    .restore-button
      display: inline-block
      margin: 0
      width: 45px
      font-size: 10px
      vertical-align: top
      height: 35px
      padding: 0
  p
    line-height: 1.35em
  h3, h4, h5
    position: relative
    color: #fff
    font-weight: bold;
    padding: 0 24px;
    margin: 0;
  h3
    position: relative
    font-size: 17px
    line-height: toolbar-height
    padding-left 42px
    cursor: pointer
    a
      color: #fff
  a.close
    absolute: top 10px left 14px
    font-size: 20px
    color: #fff
  h4
    background-color: darken(drawer-color-bg, 15%)
    font-size: 17px
    height: 73px
    padding-top: 28px
    small
      display: none
      &.error a
        color: color-error
    &.subtitled
      padding-top: 19px
      small
        display: block
        font-size: 11px
        margin-top: 5px
      a.create-folder
        margin-top: 12px
    a.add
      absolute: top -18px right 8px
      font-size: 16px
      color: drawer-color-section-icon
      padding: 16px
      &:hover
        color: drawer-color-section-icon-hover
    a.create-folder
      font-size: 11px;
      color: rgba(255, 255, 255, 0.7);
      border-radius: 3px;
      text-shadow: none;
      float: right;
      .fa
        margin-right: 3px
      &:hover
        color: drawer-color-section-icon-hover

  h5
    padding: 0
    line-height: 39px;
    font-size: 13px
    color: #fff
    font-weight: bold
    margin-bottom: 12px
    margin-top: 12px
    border-bottom: 1px solid drawer-color-border
    &:first-child
      margin-top: 0
    .count
      font-weight: normal
      color: drawer-color-fg-muted
    &:hover
      color #fff
    &.folder
      margin: 0
      padding-left: 16px
      cursor: pointer
      &.folded
        border-bottom: none
        margin-bottom: -10px
      .fa-caret-right
        absolute: top 13px left 0px
    .fa-trash-o
      absolute: top 11px right 2px
      font-size: 16px
      color: drawer-color-fg-icon
      display: none
      &:hover
        color: drawer-color-fg-icon-hover
    &:hover
      .fa-trash-o
        display: block
      .edit-in-place-trigger
        display: inline

  ul
    li
      color: drawer-color-fg
      line-height: 1.5em
      &.pair
        overflow: hidden
        .key
          text-align: right
          margin-right: 1em
          width: 80px
          float: left
        .value
          color: drawer-color-fg-active
          overflow: hidden
    li.active .list-item
      &:after
        width 4px
        opacity 1
      background-color: drawer-color-bg-active
      .contents a
        //font-weight bold
        color: drawer-color-fg-active
        .meta
          font-weight normal

    li
      background-color: drawer-color-bg
      overflow: hidden
      &.sortable-placeholder
        border-radius: 4px
        height: 29px
      .list-item
        padding: 9px horizontal-padding 0 0
        padding-left: indent-hover
        position: relative
        cursor: pointer
        transist: padding 0.2s
        overflow: hidden
        .icon
          position: absolute
          &.fa-circle-thin
            opacity: 1
            padding-left: 0
            left: 0
            font-size: 14px
            top: 10px
        &.loaded
          padding-left: indent-hover
          &.fa-circle-thin
            opacity: 0
          &:hover
            padding-left: indent-hover
            .contents a
              color: color-star
          .icon-loaded
            opacity: 1
            left: 0
            &:hover
              color: #fff
          &:hover .icon-inactive
            opacity: 0
            left: 40px
          .contents
            a, a:hover
              color: color-star
        &:after
          content: ' '
          stretch()
          background-color: #C9F9A1
          width 0
          opacity 0
        &:hover
          .fa-trash-o
            display: block
          .fa-circle-thin
            opacity: 0
          .icon-inactive, .fa-spinner
            opacity: 1
          .icon-inactive
            color: color-success
          .contents a
            color: drawer-color-fg-active
        .background
          stretch()
        a[class*="fa-"]
          font-size: 16px
          color: drawer-color-fg-icon
          &:hover
            color: drawer-color-fg-icon-hover
        .fa-trash-o
          z-index 2
          absolute: right 2px top 10px
          display: none
        .icon-inactive, .fa-spinner, .icon-loaded, .icon
          transist: all 0.2s
          opacity: 0
          z-index 2
          absolute: left 0 top 10px
        a.icon-loaded
          color: color-star
          left: -10px
        a.fa-spinner
          color: #fff
        .contents
          position relative
          z-index: 1
          line-height: 1
          a
            width: 182px
            color: drawer-color-fg
            font-size: 13px
            display: inline-block
            line-height: 1.4
            max-height: 54px
            overflow: hidden
          .meta
            color: drawer-color-fg-muted
            font-size: 12px
            margin-top 2px
            .icon
              relative: top 1px
              margin-right: 4px
  ul.indented
    li .list-item
      padding-left: indent-hover + indent
      .icon
        position: absolute
        &.fa-circle-thin
          padding-left:indent-hover + indent
          left: -21px
      a.icon-loaded
        left: 0px
      &.icon
        position: absolute
        &.fa-circle-thin
          padding-left: indent-hover + indent
          left: -14px
          font-size: 14px
          top: 10px
      &.loaded
        padding-left: indent-hover + indent
        &:hover
          padding-left: indent-hover + indent
        .icon-loaded
          left: indent
      &:hover
        padding-left: indent-hover + indent
      .icon-inactive, .fa-spinner
        left indent

  .token
    display: inline-block
    color: drawer-color-bg
    background-color: #9195A0
    text-shadow: none
    margin-right: 6px
    margin-bottom: 6px
    &:hover
      background-color: #fff
    &.token-property-key
      background-color: transparent
      color:#9195A0
      border: 1px solid #595D66
      max-width: 160px
      overflow: hidden
      &:hover
        border-color: #FFF
        color: #FFF

  .local-data-holder
    position: relative
    height: 150px
    .local-data-confirm
      position: absolute
      &.ng-hide-add-active
        display: block !important
        transition: 0.5s linear all
      &.ng-hide-remove-active
        display: block!important
        transition: 0.5s linear all
        transition-delay: 0.5s
      &.ng-hide
        opacity: 0

  .connection-error
    color:color-error

  .sync-version-list-item
    margin-top: 5px
    padding: 0px 3px 0px 3px
    position: relative
    height: 38px
    &:hover
      //background-color: #404345
      color: white
    button
      position: absolute
      top: 2px
      right: 2px
  hr
    border-top: 1px dashed lighten(drawer-color-border, 10%)
    margin-top: 13px
    margin-bottom: 1px

  .file-drop-area
    margin: 14px 0
    border: 2px dashed rgba(255,255,255,0.1)
    border-radius: 12px
    background: none
    min-height: 50px
    text-align: center
    line-height: 50px
    text-shadow: none
    color: rgba(255,255,255,0.3)
    &.active
      background: rgba(255,255,255,0.2)



  .animate-drawer.ng-enter,
  .animate-drawer.ng-leave
    transition: 200ms cubic-bezier(0.455, 0.030, 0.515, 0.955) all

  .animate-drawer.ng-enter
      opacity: 0
      left: -20px
  .animate-drawer.ng-enter.animate-drawer.ng-enter-active
      opacity: 1
      left: 0

  .animate-drawer.ng-leave
      opacity: 1
  .animate-drawer.ng-leave.animate-drawer.ng-leave-active
      opacity: 0

  form
    .checkbox, .radio
      span
        line-height: 20px
  footer
    background-color: drawer-color-bg
    position: relative
    clear: both
    line-height: 32px
    text-align: center
    height: 32px
    margin-top: -32px
